<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>聊天测试</title>
	 <link rel="stylesheet" href="layui/css/layui.css" media="all">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/json2.js"></script>
<script src="js/socket.io/socket.io.js"></script>
<script src="js/moment.min.js"></script>
	<script src="layui/layui.js"></script>
    <script>
      var socket;
	  var layim;
	  var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
		//演示代码
layui.use('layim', function(layim){
  layim = layui.layim;
  layim.config({
	   msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html',
    init: {
      //配置客服信息
      mine: {
        "username": "客服" //我的昵称
        ,"id": "100000123" //我的ID
        ,"status": "online" //在线状态 online：在线、hide：隐身
        ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
        ,"avatar": "images/header.png" //我的头像
      }
    }
    //开启客服模式
    ,brief: true
	,notice:true //是否开启桌面消息提醒，即在浏览器之外的提醒
	,uploadImage: {
       url: ''
      ,type: 'post'//默认post
    }
	,uploadFile: {
      url: '' //接口地址
      ,type: 'post' //默认post
    }
  });
  //打开一个访客面板
  layim.chat({
    name: '访客001' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: 'images/kefu.png' //头像
    ,id: 1111111 //定义唯一的id方便你处理信息
  }).chat({
    name: '访客002' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: 'images/kefu.png' //头像
    ,id: 2222222 //定义唯一的id方便你处理信息
  });
 


   //开启调试socketIO debug信息
	localStorage.debug = '*';
	socket =  io.connect('http://localhost:9527');
	var user = {
	        username: userName,
	        rank: "0",
	        roomId: "7433"
	 };
	/**
	* 初始化连接 成功后发送一个加入房间消息
	**/
	 socket.emit("joinRoom", user);
	/**
	*获得消息的回调
	**/
	socket.on('message', function (data) {
	   var messageObject = {
				   username: data.username //消息来源用户名
				   ,avatar: "images/kefu.png" //消息来源用户头像
				   ,id: "100000" //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
				   ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
				   ,content: data.msgContent //消息内容
				   ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
				   ,mine: false //是否我发送的消息，如果为true，则会显示在右方
				   ,fromid: "100000" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
				   ,timestamp: data.createTime //服务端动态时间戳
		};
	   layim.getMessage(messageObject);
	});

	layim.on('online', function(status){
	   alert(status);

	});

	 /**
	  *断开连接的回调
	**/

	socket.on('disconnect', function () {
		var disconnectObject = {
				userName: username,
				msgContent: username+'客户端失去连接!'
			};
			 layim.getMessage(disconnectObject);
	});
   //监听发送的消息
   layim.on('sendMessage', function(res){
      var mine = res.mine;
	  sendMessage(mine.content,userName);
   });
});
/**
*发送消息
**/
function sendMessage(msg,username) {
    
		var jsonObject = {
			userName: username,
			msgContent: msg
		};
		socket.emit('message', jsonObject);
}
    </script>
</head>
<body>
</body>
</html>